<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path" :class="{ active: isActive(route) }">
          {{ route.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'menu4router',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      routes: [
        {
          path: '/',
          name: 'Home',
          // 可以有子路由配置，这里省略
        },
        {
          path: '/about',
          name: 'About',
          children: [
            { path: 'team', name: 'Team' },
            { path: 'history', name: 'History' },
          ],
        },
        {
          path: '/contact',
          name: 'Contact',
          // 可以有子路由配置，这里省略
        },
        // 其他路由...
      ],
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    isActive(route) {
      console.log(
        '%c [ route ]-54',
        'font-size:13px; background:pink; color:#bf2c9f;',
        route
      );
      console.log(this.$route.matched);
      // 检查当前路由是否匹配给定的路由或其子路由
      return this.$route.matched.some((record) => {
        console.log(
          '%c [ record ]-62',
          'font-size:13px; background:pink; color:#bf2c9f;',
          record
        );
        console.log(route);
        return (
          record.path === route.path ||
          (route.children &&
            route.children.some((child) => this.$route.matched.includes(child)))
        );
      });

      // 注意：上面的逻辑对于深层嵌套路由可能不够精确，因为它只检查了直接子路由。
      // 一个更精确的方法是检查当前路由的路径是否以给定路由的路径开头
      // （对于精确到父级的匹配）：
      // return this.$route.path.startsWith(route.path) &&
      //  !this.$route.path.startsWith(this.getNextPathSegment(route.path));

      // getNextPathSegment 是一个辅助函数，用于获取给定路径的下一个路径段（即去除最后一个 `/` 和之后的任何内容）：
      // function getNextPathSegment(path) {
      //   const parts = path.split('/').filter(p => p); // 去除空字符串
      //   return parts.slice(0, -1).join('/'); // 去除最后一个部分
      // }

      // 但是，由于 Vue Router 的 `$route.matched` 已经包含了所有匹配的路由记录（包括父路由和子路由），
      // 因此通常不需要手动进行路径比较。上面的 some 检查应该足够用于大多数情况。

      // 如果你的路由配置非常复杂，并且你需要更精细的控制，你可能需要实现一个更复杂的匹配逻辑。
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    let a = this.$route;
    console.log(a);
    console.log(a.path.split('/').filter((p) => p));
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
